<template>
    <div id="box">
        <video v-if="videoForm.Video !='' && videoFlag == false" :src="'http://drcy.wyx.ac.cn/'+videoForm.Video" class="avatar" controls="controls">您的浏览器不支持视频播放</video>
        <el-upload v-if="show" class="avatar-uploader el-upload--text" :action="uploadUrl" :data='uploadData'  :show-file-list="false" :on-success="handleVideoSuccess" :before-upload="beforeUploadVideo" :on-progress="uploadVideoProcess">
            <i v-if="videoForm.Video =='' && videoFlag == false" class="el-icon-plus avatar-uploader-icon"></i>
            <el-progress v-if="videoFlag == true" type="circle" :percentage="videoUploadPercent" style="margin-top:30px;"></el-progress>
        </el-upload>
        <div id="form">
           <el-form :model="ruleForm" :rules="rules" ref="ruleForm" label-width="100px" class="demo-ruleForm">
            <el-form-item label="活动名称" prop="title" class="label">
                <el-input type="textarea" v-model="ruleForm.title" maxlength="80" placeholder="请输入标题" class="title"></el-input>
            </el-form-item>
            <el-form-item class="sub">
                <el-button type="primary" @click="submitForm('ruleForm')">发布</el-button>
            </el-form-item>
            </el-form>
        </div>
    </div>
     
</template>
<script>
import axios from 'axios'
import Cookies from 'js-cookie'
export default {
    data(){
        return {
            userName:"",
            uploadUrl:'http://up.qiniup.com',
            uploadData: {key:'',token:''},
            show:true,
            videoFlag:'',
            videoUploadPercent:0,
            videoForm:{
                Video:'',
                videoUploadId:''
            },
            dialogVisible: false,
            ruleForm: {
                title: ''
            },
             rules: {
                title: [
                    { required: true, message: '请输入标题', trigger: 'blur' },
                    { min: 5, max: 80, message: '长度在 5 到 80 个字符', trigger: 'blur' }
                ]
            },
            id:this.$route.params.id
        }
    },
    mounted(){
        this.getQiniuToken();
        this.getCookie()
    },
    methods:{
        getCookie(){
            let userName=Cookies.get("userName");
            if(userName!=undefined){
                this.userName=userName;
            }else{
                this.$router.push("/login")
            }
        },
        getQiniuToken(){
            axios.post('http://localhost:3000/token').then(res=>{
            const response=res.data
                this.uploadData.token =response.data.uploadToken
            })
        },
        beforeUploadVideo(file) {
            const isLt10M = file.size / 1024 / 1024  < 400;
            if (['video/mp4', 'video/ogg', 'video/flv','video/avi','video/wmv','video/rmvb'].indexOf(file.type) == -1) {
                this.$message.error('请上传正确的视频格式');
                return false;
            }
            if (!isLt10M) {
                this.$message.error('上传视频大小不能超过400MB哦!');
                return false;
            }
            this.uploadData.key = `upload_pic_${new Date().getTime()}_${file.name}`;
        },
        uploadVideoProcess(event, file, fileList){
            this.videoFlag = true;
            this.videoUploadPercent = Number(file.percentage.toFixed(0));
        },
        handleVideoSuccess(res, file) {                             //获取上传图片地址
            this.videoFlag = false;
            this.show=false;
            this.videoUploadPercent = 0;
            if(res.key != ""){
                this.videoForm.videoUploadId = res.key;
                this.videoForm.Video = res.key;
            }else{
                this.$message.error('视频上传失败，请重新上传！');
            }
        },
        handlePictureCardPreview(file) {
            console.log(file)
            this.videoForm.Video = file.url;
            this.dialogVisible = true;
        },
        submitForm(formName) {
            this.$refs[formName].validate((valid) => {
                if (valid) {
                    axios.post('http://localhost:3000/saveVideo',{
                        userId:this.userName,
                        text:this.ruleForm.title,
                        videoName: this.videoForm.videoUploadId,
                        id:this.id
                    }).then(res=>{
                        console.log(res)
                    })
                } else {
                    console.log('error submit!!');
                    return false;
                }
            });
        },
    }
}
</script>
<style>
    .avatar-uploader{
        width: 100px;
        height: 100px;
        text-align: center;
        border: 1px solid #e6e4e4;
        line-height: 100px;
        border-radius: 5px;
        margin: 1em auto;
        position: relative;
    }
    .el-progress-circle{
        height: 100% !important;
        width: 100% !important;
    }
    .el-progress{
        margin: 0 !important;
        width: 100px;
        height: 100px;
        position: absolute;
        left: -1px;
        top: -1px;
        background: #fff;
    }
    .avatar{
        width: 100%;
    }
    .label{
        border-bottom: 1px solid #eceaea;
    }
    .label>label{
        text-align: left;
        width: auto !important;
    }
    .label>.el-form-item__content{
        margin-left: 68px
    }
    .title>textarea{
        border:0;
    }
    #form{
        padding: .5em; 
    }
    .sub>.el-form-item__content{
        width: 50%;
        margin: 0 auto !important;
    }

    .sub>.el-form-item__content>button{
        width: 100%;
        background: #d4237a;
        border:0;
    }

</style>
